<template>
    <div>
        <div id="mapbox"/>
    </div>
</template>

<script>
    import mapboxgl from 'mapbox-gl/dist/mapbox-gl.js'

    export default {
        name: "MapboxContainer",
        mounted() {
            const accessToken = 'pk.eyJ1IjoidHRnaXNlciIsImEiOiJjamNnN2Qxc3UyMmVnMzNudGt0cmhocWFxIn0.ssWFRv2TBg19iaIMrg0xoQ'

            // // let url =
            // //     "http://localhost:8080/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=test:AGNP&STYLE=" +
            // //     "&TILEMATRIX=EPSG:4326:{z}" +
            // //     "&TILEMATRIXSET=EPSG:4326&FORMAT=application/vnd.mapbox-vector-tile" +
            // //     "&TILECOL={x}&TILEROW={y}"
            // //
            // let url="http://localhost:8080/geoserver/gwc/service/tms/1.0.0/test%3AAGNP@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf"

            let url="http://localhost:8080/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=test:agnp&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&FORMAT=application/vnd.mapbox-vector-tile&TILECOL={x}&TILEROW={y}"


            const layer = {
                'id': 'agnp',
                'type': 'circle',
                'source': {
                    //'scheme':'tms',//TMS服务有此一行
                    'type': 'vector',
                    'tiles': [url]
                },
                'source-layer': 'agnp', // layer_name
                'paint': {
                    'circle-radius':5,
                    'circle-color': '#ffeeff' // '#088',
                }
            }

            mapboxgl.accessToken=accessToken
            let map = new mapboxgl.Map({
                container: 'mapbox',
                style: 'mapbox://styles/mapbox/dark-v9',
                center: [0, 20], // [-103.59179687498357, 40.66995747013945],
                zoom: 1, // 1.27, 1.359
                renderWorldCopies: true
            })
            map.addControl(new mapboxgl.NavigationControl(), 'top-right')
            map.on('load', () => {
                map.addLayer(layer)
            })



        }
    }
</script>

<style scoped lang="scss">
    #mapbox{
        height: 100%;
    }
</style>
